<template>
	<view>
		<!-- 导航栏 - 与sessions.vue保持一致 -->
		<u-navbar 
			title="培训详情" 
			:auto-back="true"
			:background="{ backgroundColor: '#2979ff' }"
			:title-style="{ color: '#ffffff', fontWeight: '600' }"
		></u-navbar>
		
		<!-- 🔧 认证加载界面 -->
		<view v-if="isAuthLoading" class="auth-loading-container">
			<view class="loading-content">
				<view class="loading-icon-auth">
					<u-loading-icon mode="spinner" size="60" color="#2979ff"></u-loading-icon>
				</view>
				<text class="loading-title">正在验证身份</text>
				<text class="loading-subtitle">{{ isAuthenticated ? '正在加载培训详情...' : '正在跳转到企业微信授权...' }}</text>
			</view>
			<view class="loading-footer">
				<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>
		</view>
		
		<!-- 🔧 主要内容区域 - 只有认证成功才显示 -->
		<view v-else class="u-page">
		
		<!-- 培训信息卡片 - 合并头部和详细信息 -->
		<view class="info-wrapper">
			<u-transition 
				mode="zoom" 
				:show="showTransition" 
				:duration="300"
			>
		<view class="training-info-card" v-if="!loading && trainingInfo">
					<!-- 培训标题区域 -->
					<view class="training-title-section">
					<text class="training-title">{{ trainingInfo.teach_name }}</text>
						<text class="training-subtitle">{{ trainingInfo.category_name || '培训课程' }}</text>
			</view>
			
				<!-- 培训基本信息区域 -->
				<view class="training-info-section">
			<view class="info-row location-row">
						<view class="location-icon"></view>
						<text class="info-text">{{ trainingInfo.teach_address || '地点待定' }}</text>
						<!-- 状态盖章 - 放在地点信息中间 -->
						<view
							class="training-status-stamp-center"
							:class="{
								'stamp-pending': trainingInfo.teach_condition === 'not-started',
								'stamp-ongoing': trainingInfo.teach_condition === 'in-progress',
								'stamp-completed': trainingInfo.teach_condition === 'finished'
							}"
						>
							<text>{{ getStatusText(trainingInfo.teach_condition) }}</text>
						</view>
				</view>
				<view class="info-row">
							<view class="calendar-icon"></view>
						<text class="info-text">{{ formatTimeRange(trainingInfo.start_time, trainingInfo.end_time) }}</text>
					</view>
				<view class="info-row" v-if="trainingInfo.host">
							<view class="instructor-icon"></view>
						<text class="info-text">主持人：{{ trainingInfo.host }}</text>
					</view>
				<view class="info-row" v-if="trainingInfo.training_studytime">
							<view class="time-icon"></view>
						<text class="info-text">学时：{{ trainingInfo.training_studytime }}小时</text>
					</view>
				</view>
				
				<view class="content-section" v-if="trainingInfo.teach_content">
						<view class="content-header">
					<text class="content-title">培训内容</text>
						</view>
					<!-- 🔧 使用 view 包装富文本内容，支持展开/收起 -->
					<view class="content-wrapper">
						<view 
							:class="['content-container', { 'content-collapsed': !isContentExpanded && isContentLong }]"
						>
							<rich-text 
								class="content-rich-text"
								:nodes="parseRichText(trainingInfo.teach_content)"
							></rich-text>
						</view>
						
						<!-- 展开/收起按钮 -->
						<view 
							v-if="isContentLong" 
							class="content-toggle-btn" 
							@click="toggleContent"
						>
							<text class="toggle-text">{{ isContentExpanded ? '收起' : '展开全部' }}</text>
							<view class="toggle-icon" :class="{ 'expanded': isContentExpanded }">
								<text class="icon-arrow">▼</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</u-transition>
		</view>
		
		<!-- 分隔线和场次标题 -->
		<view class="section-divider" v-if="!loading && trainingInfo && sessionsList.length > 0">
			<view class="divider-line"></view>
			<view class="section-title">
				<text class="title-text">培训场次</text>
				<text class="title-count">{{ sessionsList.length }}场</text>
			</view>
		</view>
		
		<!-- 场次列表 - 采用SessionCard组件的精美设计 -->
		<view v-if="sessionsList.length > 0" class="list-wrapper">
			<u-list>
				<u-list-item v-for="(session, index) in sessionsList" :key="session.id">
					<u-transition
						:show="showTransition"
						mode="slide-left"
						:duration="300"
						:custom-style="{ width: '100%' }"
						:style="{ 'transition-delay': (index * 0.05) + 's' }"
					>
						<view class="session-card" :class="{ 'current-session': isCurrentSession(session, index) }">
							<!-- 签到状态盖章 -->
				<view 
								class="signin-status-stamp"
								:class="{
									'signin-not-signed': session.sign_status === 0,
									'signin-signed-in': session.sign_status === 1,
									'signin-signed-out': session.sign_status === 2,
									'signin-supplementary': session.sign_status === 3
								}"
								v-if="typeof session.sign_status !== 'undefined'"
							>
								<text>{{ getSignStatusText(session.sign_status) }}</text>
					</view>
					
							<!-- 卡片头部 - 场次标题 -->
							<view class="session-header">
								<text class="session-title-text">{{ session.session_name || `第${session.session_number}场培训` }}</text>
							</view>
							
							<!-- 时间信息区域 -->
							<view class="time-info-section">
								<view class="date-row">
									<view class="calendar-icon"></view>
									<text class="session-date">{{ formatSessionDate(session.session_date) }}</text>
							</view>
								<view class="time-row">
									<view class="clock-icon"></view>
									<view class="time-detail">
										<text class="start-time">开始：{{ formatTime(session.start_time) }}</text>
										<text class="end-time">结束：{{ formatTime(session.end_time) }}</text>
							</view>
						</view>
								<!-- 培训状态文字显示 -->
								<view class="session-status-text">
									<text class="status-label">培训状态：</text>
									<text class="status-value" :class="{
										'status-pending': session.status === 'pending',
										'status-ongoing': session.status === 'ongoing',
										'status-completed': session.status === 'completed',
										'status-cancelled': session.status === 'cancelled'
									}">{{ getSessionStatusText(session.status) }}</text>
								</view>
							</view>
							
							<!-- 其他信息 -->
							<view class="session-details">
								<view class="detail-item" v-if="session.instructor">
									<view class="instructor-icon"></view>
									<text class="detail-text">讲师：{{ session.instructor }}</text>
							</view>
							<!-- 签到时间 - 仅在已签到但未签退时显示 -->
							<view class="detail-item" v-if="session.sign_time && session.sign_status === 1">
								<view class="time-icon"></view>
								<text class="detail-text">签到时间：{{ formatSignTime(session.sign_time) }}</text>
					</view>
							<!-- 签退时间 - 已签退时显示 -->
							<view class="detail-item" v-if="session.finish_time && session.sign_status === 2">
								<view class="time-icon"></view>
								<text class="detail-text">签退时间：{{ formatSignTime(session.finish_time) }}</text>
					</view>
							<!-- 补录时间 - 补录状态时显示 -->
							<view class="detail-item" v-if="session.sign_time && session.sign_status === 3">
								<view class="time-icon"></view>
								<text class="detail-text">补录时间：{{ formatSignTime(session.sign_time) }}</text>
					</view>
					</view>
				</view>
					</u-transition>
				</u-list-item>
			</u-list>
			</view>
			
			<!-- 空状态 -->
		<view v-else-if="!loading" class="empty-state">
			<u-empty
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
				<text class="empty-text">暂无培训场次</text>
				</u-empty>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<u-loading-icon :show="loading" color="#2979ff" size="28"></u-loading-icon>
			<text class="loading-text">正在加载培训信息...</text>
		</view>
		
		<!-- 底部版权信息 -->
		<view class="footer">
			<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import authMixin from '@/mixins/authMixin.js';

export default {
	name: 'TrainingDetail',
	mixins: [authMixin],
	data() {
		return {
			loading: true,
			teachId: '',
			trainingInfo: null,
			sessionsList: [],
			showTransition: false,
			isAuthLoading: true, // 🎯 认证加载状态
			isContentExpanded: false, // 🔧 培训内容是否展开
			isContentLong: false, // 🔧 培训内容是否过长
			contentMaxLength: 200 // 🔧 内容长度阈值（字符数）
		}
	},
	
	computed: {
		// 🎯 获取认证状态
		...mapGetters([
			'isAuthenticated'
		])
	},
	
	async onLoad(option) {
		console.log('详情页面参数:', option);
		
		// 获取参数
		this.teachId = option.teach_id;
		
		if (!this.teachId || this.teachId === '0' || this.teachId === 0) {
			uni.showToast({
				title: '培训ID参数无效',
				icon: 'none'
			});
			return;
		}
		
		// 🎯 使用直接认证检查，避免显示主页
		const authResult = await this.performDirectAuth(async () => {
			// 认证成功回调 - 关闭认证加载状态，加载数据
			console.log("✅ 培训详情认证成功，加载数据");
			this.isAuthLoading = false;
			
			// 加载数据
			await this.loadTrainingDetail();
			
			// 延迟显示动画效果
			setTimeout(() => {
				this.showTransition = true;
			}, 100);
			await this.loadSessionsList();
			
			this.loading = false;
		}, () => {
			// 认证失败回调 - 用户将被跳转到认证页面，保持loading状态
			console.log("❌ 培训详情认证失败，将跳转认证");
		});
		
		console.log("🔍 认证检查完成，结果:", authResult);
	},
	
	methods: {
		// 加载培训详情
		async loadTrainingDetail() {
			try {
				const apiUrl = `${this.$store.getters.currentApiBaseUrl}/${this.$store.state.apiVersion}/teach-detail?teach_id=${this.teachId}&userid=${this.userid}`;
				console.log('请求培训详情:', apiUrl);
				
				const res = await uni.$u.http.get(apiUrl);
				
				if (res.data.status === 1) {
					this.trainingInfo = res.data.data;
					console.log('培训详情加载成功:', this.trainingInfo);
					
					// 🔧 检查培训内容是否过长
					this.checkContentLength();
				} else {
					throw new Error(res.data.message || '获取培训详情失败');
				}
			} catch (error) {
				console.error('加载培训详情失败:', error);
				uni.showToast({
					title: error.message || '获取培训详情失败',
					icon: 'none'
				});
			}
		},
		
		// 加载场次列表
		async loadSessionsList() {
			try {
				const apiUrl = `${this.$store.getters.currentApiBaseUrl}/${this.$store.state.apiVersion}/teach-sessions?teach_id=${this.teachId}&userid=${this.userid}`;
				console.log('请求场次列表:', apiUrl);
				
				const res = await uni.$u.http.get(apiUrl);
				
				if (res.data.status === 1) {
					this.sessionsList = res.data.data || [];
					console.log('场次列表加载成功:', this.sessionsList);
					
					// 🔧 调试：检查每个场次的status字段
					this.sessionsList.forEach((session, index) => {
						console.log(`场次 ${index + 1} - ID: ${session.id}, Status: "${session.status}", SignStatus: ${session.sign_status}`);
						console.log(`场次详情:`, session);
					});
				} else {
					throw new Error(res.data.message || '获取场次列表失败');
				}
			} catch (error) {
				console.error('加载场次列表失败:', error);
				uni.showToast({
					title: error.message || '获取场次列表失败',
					icon: 'none'
				});
			}
		},
		
		// 获取培训状态样式类
		getStatusClass(condition) {
			const status = parseInt(condition);
			switch(status) {
				case 0: return 'status-not-started';
				case 1: return 'status-in-progress';  
				case 2: return 'status-finished';
				default: return 'status-unknown';
			}
		},
		
		// 获取培训状态文本
		getStatusText(condition) {
			const status = parseInt(condition);
			switch(status) {
				case 0: return '未开始';
				case 1: return '进行中';
				case 2: return '已结束';
				default: return '未知';
			}
		},
		
		// 获取场次卡片样式类
		getSessionCardClass(session) {
			return {
				'session-completed': session.status === 'completed',
				'session-ongoing': session.status === 'ongoing',
				'session-pending': session.status === 'pending'
			};
		},
		
		// 获取场次状态样式类
		getSessionStatusClass(status) {
			switch(status) {
				case 'pending': return 'status-pending';
				case 'ongoing': return 'status-ongoing';
				case 'completed': return 'status-completed';
				case 'cancelled': return 'status-cancelled';
				default: return 'status-pending';
			}
		},
		
		// 获取场次状态文本
		getSessionStatusText(status) {
			console.log('🔍 获取场次状态文本，输入status:', status, typeof status);
			
			// 处理空值或undefined
			if (!status || status === '' || status === null || status === undefined) {
				console.log('⚠️ status为空，返回默认值');
				return '待开始';
			}
			
			switch(status) {
				case 'pending': return '待开始';
				case 'ongoing': return '进行中';
				case 'completed': return '已完成';
				case 'cancelled': return '已取消';
				default: 
					console.log('⚠️ 未识别的status值:', status);
					return '待开始';
			}
		},
		
		// 获取签到状态样式类
		getSignStatusClass(signStatus) {
			switch(parseInt(signStatus)) {
				case 0: return 'sign-not-signed';
				case 1: return 'sign-signed-in';
				case 2: return 'sign-signed-out';
				default: return 'sign-not-signed';
			}
		},
		
		// 获取签到状态图标
		getSignStatusIcon(signStatus) {
			switch(parseInt(signStatus)) {
				case 0: return 'close-circle-fill';
				case 1: return 'checkmark-circle-fill';
				case 2: return 'checkmark-done-circle-fill';
				default: return 'close-circle-fill';
			}
		},
		
		// 获取签到状态颜色
		getSignStatusColor(signStatus) {
			switch(parseInt(signStatus)) {
				case 0: return '#909399';
				case 1: return '#52c41a';
				case 2: return '#2979ff';
				default: return '#909399';
			}
		},
		
		// 获取签到状态文本
		getSignStatusText(signStatus) {
			switch(parseInt(signStatus)) {
				case 0: return '未签到';
				case 1: return '已签到';
				case 2: return '已签退';
				default: return '未签到';
			}
		},
		
		// 返回上一页
		back() {
			uni.navigateBack();
		},
		
		
		// 格式化场次日期（只显示日期和星期）
		formatSessionDate(dateStr) {
			if (!dateStr) return '日期待定'
			const date = new Date(dateStr)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
			return `${year}-${month}-${day} 周${weekDay}`
		},
		
		// 格式化时间（timestamp转时分）
		formatTime(timestamp) {
			if (!timestamp) return '--:--'
			const date = new Date(timestamp * 1000)
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			return `${hour}:${minute}`
		},
		
		// 格式化时间范围
		formatTimeRange(startTime, endTime) {
			if (!startTime || !endTime) return '时间待定';
			
			const formatTime = (timestamp) => {
				const date = new Date(parseInt(timestamp) * 1000);
				return date.toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				});
			};
			
			return `${formatTime(startTime)} - ${formatTime(endTime)}`;
		},
		
		// 格式化场次日期时间
		formatSessionDate(sessionDate, startTime, endTime) {
			if (sessionDate) {
				const date = new Date(sessionDate);
				const dateStr = date.toLocaleDateString('zh-CN');
				
				if (startTime && endTime) {
					const startDate = new Date(parseInt(startTime) * 1000);
					const endDate = new Date(parseInt(endTime) * 1000);
					const timeStr = `${startDate.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})} - ${endDate.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})}`;
					return `${dateStr} ${timeStr}`;
				}
				
				return dateStr;
			}
			
			return '时间待定';
		},
		
		// 格式化签到时间
		formatSignTime(signTime) {
			if (!signTime) return '';
			
			// 如果signTime是时间戳格式的字符串，需要转换
			let timestamp;
			if (typeof signTime === 'string' && /^\d+$/.test(signTime)) {
				timestamp = parseInt(signTime) * 1000;
			} else {
				timestamp = new Date(signTime).getTime();
			}
			
			const date = new Date(timestamp);
			return date.toLocaleString('zh-CN');
		},
		
		// 判断是否为当前培训场次
		isCurrentSession(session, index) {
			if (!session || !session.session_date || !session.start_time || !session.end_time) {
				return false;
			}
			
			const now = new Date();
			const currentTime = now.getTime();
			
			// 构建场次的开始和结束时间
			const sessionDate = new Date(session.session_date);
			const startTime = new Date(session.start_time * 1000);
			const endTime = new Date(session.end_time * 1000);
			
			// 将日期和时间结合
			const sessionStartTime = new Date(
				sessionDate.getFullYear(),
				sessionDate.getMonth(), 
				sessionDate.getDate(),
				startTime.getHours(),
				startTime.getMinutes(),
				startTime.getSeconds()
			);
			
			const sessionEndTime = new Date(
				sessionDate.getFullYear(),
				sessionDate.getMonth(),
				sessionDate.getDate(), 
				endTime.getHours(),
				endTime.getMinutes(),
				endTime.getSeconds()
			);
			
			// 开始前30分钟
			const beforeStartTime = new Date(sessionStartTime.getTime() - 30 * 60 * 1000);
			// 结束后1小时
			const afterEndTime = new Date(sessionEndTime.getTime() + 60 * 60 * 1000);
			
			// 判断当前时间是否在该场次的时间范围内（开始前30分钟到结束后1小时）
			return currentTime >= beforeStartTime.getTime() && currentTime <= afterEndTime.getTime();
		},
		
		// 返回上一页
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		
		// 🔧 检查培训内容长度
		checkContentLength() {
			if (!this.trainingInfo || !this.trainingInfo.teach_content) {
				this.isContentLong = false;
				console.log('培训内容为空，不显示展开/收起按钮');
				return;
			}
			
			// 移除HTML标签，计算纯文本长度
			const originalContent = this.trainingInfo.teach_content;
			const textContent = originalContent
				.replace(/<[^>]*>/g, '') // 移除HTML标签
				.replace(/&[^;]+;/g, '') // 移除HTML实体
				.replace(/\s+/g, ' ') // 合并多个空格
				.trim();
			
			this.isContentLong = textContent.length > this.contentMaxLength;
			
			console.log('🔍 培训内容长度检查:');
			console.log('- 原始内容长度:', originalContent.length);
			console.log('- 纯文本长度:', textContent.length);
			console.log('- 长度阈值:', this.contentMaxLength);
			console.log('- 是否过长:', this.isContentLong);
			console.log('- 纯文本内容预览:', textContent.substring(0, 50) + '...');
			
			// 移除测试模式，使用正常的长度判断
		},
		
		// 🔧 切换内容展开/收起状态
		toggleContent() {
			this.isContentExpanded = !this.isContentExpanded;
			console.log(`内容${this.isContentExpanded ? '展开' : '收起'}`);
		},
		
		// 🔧 解析富文本内容
		parseRichText(htmlContent) {
			if (!htmlContent) return [];
			
			// 如果内容已经是HTML格式，直接返回
			if (typeof htmlContent === 'string' && htmlContent.includes('<')) {
				// 清理一些可能的问题标签和样式
				let cleanHtml = htmlContent
					// 移除可能的脚本标签（安全考虑）
					.replace(/<script[^>]*>.*?<\/script>/gi, '')
					// 移除可能的样式标签
					.replace(/<style[^>]*>.*?<\/style>/gi, '')
					// 处理图片标签，添加样式
					.replace(/<img([^>]*)>/gi, '<img$1 style="max-width:100%;height:auto;display:block;margin:10px 0;">')
					// 处理段落标签，添加间距
					.replace(/<p([^>]*)>/gi, '<p$1 style="margin:8px 0;line-height:1.6;">')
					// 处理标题标签
					.replace(/<h([1-6])([^>]*)>/gi, '<h$1$2 style="margin:12px 0 8px 0;font-weight:600;">')
					// 处理列表
					.replace(/<ul([^>]*)>/gi, '<ul$1 style="margin:8px 0;padding-left:20px;">')
					.replace(/<ol([^>]*)>/gi, '<ol$1 style="margin:8px 0;padding-left:20px;">')
					.replace(/<li([^>]*)>/gi, '<li$1 style="margin:4px 0;line-height:1.5;">')
					// 处理链接
					.replace(/<a([^>]*)>/gi, '<a$1 style="color:#2979ff;text-decoration:underline;">')
					// 处理强调文本
					.replace(/<strong([^>]*)>/gi, '<strong$1 style="font-weight:600;">')
					.replace(/<b([^>]*)>/gi, '<b$1 style="font-weight:600;">')
					.replace(/<em([^>]*)>/gi, '<em$1 style="font-style:italic;">')
					// 处理表格
					.replace(/<table([^>]*)>/gi, '<table$1 style="width:100%;border-collapse:collapse;margin:10px 0;">')
					.replace(/<td([^>]*)>/gi, '<td$1 style="padding:8px;border:1px solid #e0e0e0;">')
					.replace(/<th([^>]*)>/gi, '<th$1 style="padding:8px;border:1px solid #e0e0e0;background-color:#f5f5f5;font-weight:600;">')
					// 处理引用块
					.replace(/<blockquote([^>]*)>/gi, '<blockquote$1 style="margin:10px 0;padding:10px 15px;border-left:4px solid #2979ff;background-color:#f8f9fa;font-style:italic;">')
					// 处理代码块
					.replace(/<pre([^>]*)>/gi, '<pre$1 style="background-color:#f5f5f5;padding:10px;border-radius:4px;overflow-x:auto;margin:10px 0;">')
					.replace(/<code([^>]*)>/gi, '<code$1 style="background-color:#f0f0f0;padding:2px 4px;border-radius:2px;font-family:monospace;">')
					// 处理分割线
					.replace(/<hr([^>]*)>/gi, '<hr$1 style="margin:15px 0;border:none;border-top:1px solid #e0e0e0;">')
					// 添加基础样式到div
					.replace(/<div([^>]*)>/gi, '<div$1 style="margin:5px 0;">')
					// 处理换行
					.replace(/<br\s*\/?>/gi, '<br/>');
				
				return cleanHtml;
			}
			
			// 如果是纯文本，转换为带格式的HTML
			return htmlContent.replace(/\n/g, '<br/>');
		}
	}
}
</script>

<style lang="scss" scoped>
.u-page {
	background-color: #f5f7fa;
	min-height: 100vh;
}

/* 强制设置导航栏为蓝色 - 与sessions.vue保持一致 */
:deep(.u-navbar) {
	background: linear-gradient(135deg, #2979ff 0%, #40a9ff 100%) !important;
}

:deep(.u-navbar__content) {
	background: linear-gradient(135deg, #2979ff 0%, #40a9ff 100%) !important;
}

:deep(.u-navbar__content__title) {
	color: #ffffff !important;
}

:deep(.u-icon) {
	color: #ffffff !important;
}

/* 培训标题区域 */
.training-title-section {
	padding: 30rpx 30rpx 20rpx;
	background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
	border-bottom: 1rpx solid #e8f4ff;
	text-align: center;
}

.training-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 8rpx;
	display: block;
	line-height: 1.3;
}

.training-subtitle {
	font-size: 26rpx;
	color: #666666;
	display: block;
	line-height: 1.4;
}

/* 信息包装器 */
.info-wrapper {
	padding: 20rpx;
}

/* 培训信息卡片 - 采用场次样式风格 */
.training-info-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid #e8f4ff;
	position: relative;
	margin-bottom: 20rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.training-info-card:active {
	transform: translateY(2rpx) scale(0.99);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
	border-color: #2979ff;
}

/* 培训状态盖章 - 右侧方形印章 */
.training-status-stamp-right {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	font-size: 20rpx;
	font-weight: 700;
	width: 100rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8rpx;
	transform: rotate(-10deg);
	border: 3rpx solid;
	z-index: 10;
	opacity: 0.9;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
	letter-spacing: 1rpx;
	clip-path: polygon(8% 0%, 92% 0%, 100% 20%, 95% 100%, 5% 100%, 0% 20%);
}

/* 添加内边框效果 */
.training-status-stamp-right::before {
	content: '';
	position: absolute;
	top: 6rpx;
	left: 6rpx;
	right: 6rpx;
	bottom: 6rpx;
	border: 1rpx solid currentColor;
	border-radius: 4rpx;
	opacity: 0.3;
}

/* 添加外边框装饰效果 */
.training-status-stamp-right::after {
	content: '';
	position: absolute;
	top: -4rpx;
	left: -4rpx;
	right: -4rpx;
	bottom: -4rpx;
	border: 1rpx dashed currentColor;
	border-radius: 8rpx;
	opacity: 0.2;
}

/* 右侧印章的不同状态样式 */
.training-status-stamp-right.stamp-pending {
	color: #909399;
	border-color: #909399;
	background: radial-gradient(circle, rgba(144, 147, 153, 0.15) 0%, rgba(249, 250, 251, 0.9) 100%);
}

.training-status-stamp-right.stamp-ongoing {
	color: #1890ff;
	border-color: #1890ff;
	background: radial-gradient(circle, rgba(24, 144, 255, 0.15) 0%, rgba(230, 247, 255, 0.9) 100%);
}

.training-status-stamp-right.stamp-completed {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}

/* 培训基本信息区域 */
.training-info-section {
	padding: 24rpx 30rpx;
	background: linear-gradient(135deg, #fafcff 0%, #f0f8ff 100%);
	border-bottom: 1rpx solid #e8f4ff;
}

.info-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-text {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
	line-height: 1.4;
}

/* 内容区域 */
.content-section {
	border-top: 1rpx solid #f0f2f5;
	padding: 24rpx;
	background-color: #fafbfc;
}

.content-header {
	margin-bottom: 16rpx;
}

.content-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 600;
}

.content-text {
	font-size: 26rpx;
	color: #606266;
	line-height: 1.6;
}

/* 🔧 富文本内容样式 */
.content-wrapper {
	position: relative;
}

/* 🔧 内容容器 - 控制展开/收起 */
.content-container {
	position: relative;
	transition: all 0.3s ease;
}

/* 🔧 内容收起状态 */
.content-container.content-collapsed {
	max-height: 150rpx; /* 降低高度，让收起效果更明显 */
	overflow: hidden;
}

/* 渐变遮罩效果 */
.content-container.content-collapsed::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80rpx;
	background: linear-gradient(transparent, rgba(250, 252, 255, 0.9), #fafcff);
	pointer-events: none;
	z-index: 1;
}

.content-rich-text {
	font-size: 26rpx;
	color: #606266;
	line-height: 1.6;
	word-wrap: break-word;
	word-break: break-all;
}

/* 🔧 展开/收起按钮样式 */
.content-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	margin-top: 16rpx;
	background: linear-gradient(135deg, #f0f8ff 0%, #e8f4ff 100%);
	border: 1rpx solid #e8f4ff;
	border-radius: 12rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
}

.content-toggle-btn:active {
	transform: scale(0.98);
	background: linear-gradient(135deg, #e8f4ff 0%, #d6efff 100%);
}

.toggle-text {
	font-size: 26rpx;
	color: #2979ff;
	font-weight: 500;
	margin-right: 12rpx;
}

.toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32rpx;
	height: 32rpx;
	background-color: #2979ff;
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.toggle-icon.expanded {
	transform: rotate(180deg);
}

.icon-arrow {
	font-size: 16rpx;
	color: #ffffff;
	line-height: 1;
}

/* 富文本内部元素样式 */
:deep(.content-rich-text) {
	/* 标题样式 */
	h1, h2, h3, h4, h5, h6 {
		color: #303133;
		margin: 20rpx 0 16rpx 0;
		font-weight: 600;
		line-height: 1.4;
	}
	
	h1 { font-size: 36rpx; }
	h2 { font-size: 32rpx; }
	h3 { font-size: 28rpx; }
	h4 { font-size: 26rpx; }
	h5 { font-size: 24rpx; }
	h6 { font-size: 22rpx; }
	
	/* 段落样式 */
	p {
		margin: 16rpx 0;
		line-height: 1.6;
		text-align: justify;
	}
	
	/* 列表样式 */
	ul, ol {
		margin: 16rpx 0;
		padding-left: 40rpx;
	}
	
	li {
		margin: 8rpx 0;
		line-height: 1.5;
	}
	
	/* 强调文本 */
	strong, b {
		font-weight: 600;
		color: #303133;
	}
	
	em, i {
		font-style: italic;
		color: #606266;
	}
	
	/* 链接样式 */
	a {
		color: #2979ff;
		text-decoration: underline;
	}
	
	/* 图片样式 */
	img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 20rpx auto;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 表格样式 */
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 20rpx 0;
		font-size: 24rpx;
	}
	
	th, td {
		padding: 16rpx;
		border: 1rpx solid #e0e0e0;
		text-align: left;
	}
	
	th {
		background-color: #f5f5f5;
		font-weight: 600;
		color: #303133;
	}
	
	/* 引用块样式 */
	blockquote {
		margin: 20rpx 0;
		padding: 20rpx 30rpx;
		border-left: 8rpx solid #2979ff;
		background-color: #f8f9fa;
		font-style: italic;
		border-radius: 0 8rpx 8rpx 0;
	}
	
	/* 代码样式 */
	pre {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 8rpx;
		overflow-x: auto;
		margin: 20rpx 0;
		font-family: 'Courier New', monospace;
		font-size: 22rpx;
	}
	
	code {
		background-color: #f0f0f0;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		font-family: 'Courier New', monospace;
		font-size: 22rpx;
		color: #e74c3c;
	}
	
	/* 分割线样式 */
	hr {
		margin: 30rpx 0;
		border: none;
		border-top: 2rpx solid #e0e0e0;
	}
	
	/* div 容器样式 */
	div {
		margin: 10rpx 0;
	}
}

/* 分隔线和场次标题 */
.section-divider {
	margin: 30rpx 20rpx 20rpx;
}

.divider-line {
	height: 2rpx;
	background: linear-gradient(to right, transparent, #e8f4ff, #2979ff, #e8f4ff, transparent);
	margin-bottom: 20rpx;
	position: relative;
}

.divider-line::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60rpx;
	height: 6rpx;
	background: linear-gradient(to right, #2979ff, #40a9ff);
	border-radius: 3rpx;
}

.section-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #2979ff;
	letter-spacing: 2rpx;
}

.title-count {
	font-size: 24rpx;
	color: #909399;
	background-color: #f0f8ff;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	border: 1rpx solid #e8f4ff;
}

/* 列表包装器 */
.list-wrapper {
	padding: 0 20rpx 20rpx;
}

/* 场次卡片 - SessionCard精美设计 */
.session-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid #e8f4ff;
	position: relative;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.session-card:active {
	transform: translateY(2rpx) scale(0.99);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
	border-color: #2979ff;
}

/* 培训状态文字显示 */
.session-status-text {
	display: flex;
	align-items: center;
	margin-top: 12rpx;
	padding-top: 12rpx;
	border-top: 1rpx solid #f0f0f0;
}

.status-label {
	font-size: 24rpx;
	color: #666666;
	margin-right: 8rpx;
	font-weight: 500;
}

.status-value {
	font-size: 24rpx;
	font-weight: 600;
}

/* 状态文字颜色 */
.status-value.status-pending {
	color: #909399;
}

.status-value.status-ongoing {
	color: #1890ff;
}

.status-value.status-completed {
	color: #52c41a;
}

.status-value.status-cancelled {
	color: #ff4d4f;
}

/* 签到状态盖章 - 圆形原型设计 */
.signin-status-stamp {
	position: absolute;
	top: 50%;
	right: 30rpx;
	transform: translateY(-50%) rotate(-15deg);
	font-size: 16rpx;
	font-weight: 700;
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 3rpx solid;
	z-index: 10;
	opacity: 0.9;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
	letter-spacing: 0.5rpx;
}

/* 添加内圈边框效果 */
.signin-status-stamp::before {
	content: '';
	position: absolute;
	top: 8rpx;
	left: 8rpx;
	right: 8rpx;
	bottom: 8rpx;
	border: 1rpx solid currentColor;
	border-radius: 50%;
	opacity: 0.3;
}

/* 添加外圈虚线效果 */
.signin-status-stamp::after {
	content: '';
	position: absolute;
	top: -6rpx;
	left: -6rpx;
	right: -6rpx;
	bottom: -6rpx;
	border: 1rpx dashed currentColor;
	border-radius: 50%;
	opacity: 0.2;
}

/* 未签到 - 灰色 */
.signin-not-signed {
	color: #909399;
	border-color: #909399;
	background: radial-gradient(circle, rgba(144, 147, 153, 0.15) 0%, rgba(249, 250, 251, 0.9) 100%);
}

/* 已签到 - 天蓝色 */
.signin-signed-in {
	color: #00bfff;
	border-color: #00bfff;
	background: radial-gradient(circle, rgba(0, 191, 255, 0.15) 0%, rgba(230, 249, 255, 0.9) 100%);
}

/* 已签退 - 绿色 */
.signin-signed-out {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}

/* 补录 - 绿色 */
.signin-supplementary {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}


/* 卡片头部 */
.session-header {
	padding: 24rpx 30rpx 20rpx;
	background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
	border-bottom: 1rpx solid #e8f4ff;
}

.session-title-text {
	font-size: 32rpx;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.3;
}

/* 时间信息区域 */
.time-info-section {
	padding: 24rpx 30rpx;
	background: linear-gradient(135deg, #fafcff 0%, #f0f8ff 100%);
	border-bottom: 1rpx solid #e8f4ff;
}

.date-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.calendar-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	position: relative;
}

.calendar-icon::before {
	content: "";
	position: absolute;
	width: 20rpx;
	height: 18rpx;
	border: 2rpx solid #2979ff;
	border-radius: 4rpx;
	top: 6rpx;
	left: 4rpx;
}

.calendar-icon::after {
	content: "";
	position: absolute;
	width: 8rpx;
	height: 2rpx;
	background-color: #2979ff;
	top: 12rpx;
	left: 10rpx;
	box-shadow: 0 4rpx 0 #2979ff;
}

.session-date {
	font-size: 28rpx;
	color: #2979ff;
	font-weight: 600;
}

.time-row {
	display: flex;
	align-items: flex-start;
}

.clock-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	position: relative;
	margin-top: 2rpx;
}

.clock-icon::before {
	content: "";
	position: absolute;
	width: 20rpx;
	height: 20rpx;
	border: 2rpx solid #19be6b;
	border-radius: 50%;
	top: 4rpx;
	left: 4rpx;
}

.clock-icon::after {
	content: "";
	position: absolute;
	width: 6rpx;
	height: 1rpx;
	background-color: #19be6b;
	top: 14rpx;
	left: 14rpx;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	box-shadow: 0 -6rpx 0 #19be6b;
}

.time-detail {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.start-time, .end-time {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

/* 其他详情 */
.session-details {
	padding: 20rpx 30rpx;
}

.detail-item {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.location-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
	position: relative;
}

.location-icon::before {
	content: "";
	position: absolute;
	width: 12rpx;
	height: 12rpx;
	background-color: #ff9900;
	border-radius: 50%;
	top: 2rpx;
	left: 6rpx;
}

.location-icon::after {
	content: "";
	position: absolute;
	width: 1rpx;
	height: 8rpx;
	background-color: #ff9900;
	bottom: 4rpx;
	left: 12rpx;
	transform: rotate(-45deg);
}

.instructor-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
	position: relative;
}

.instructor-icon::before {
	content: "";
	position: absolute;
	width: 12rpx;
	height: 12rpx;
	background-color: #9c27b0;
	border-radius: 50%;
	top: 2rpx;
	left: 6rpx;
}

.instructor-icon::after {
	content: "";
	position: absolute;
	width: 16rpx;
	height: 8rpx;
	background-color: #9c27b0;
	border-radius: 8rpx 8rpx 0 0;
	bottom: 2rpx;
	left: 4rpx;
}

.time-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
	position: relative;
}

.time-icon::before {
	content: "";
	position: absolute;
	width: 16rpx;
	height: 16rpx;
	border: 2rpx solid #2196f3;
	border-radius: 50%;
	top: 4rpx;
	left: 4rpx;
}

.time-icon::after {
	content: "";
	position: absolute;
	width: 4rpx;
	height: 1rpx;
	background-color: #2196f3;
	top: 12rpx;
	left: 12rpx;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	box-shadow: 0 -4rpx 0 #2196f3;
}

.detail-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
}

/* 空状态 */
.empty-state {
	padding: 100rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-text {
	font-size: 28rpx;
	color: #909399;
	margin-top: 20rpx;
}

/* 加载状态 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.loading-text {
	font-size: 28rpx;
	color: #909399;
	margin-top: 16rpx;
}

/* 底部版权信息 */
.footer {
	text-align: center;
	padding: 40rpx 20rpx 60rpx;
	margin-top: 40rpx;
}

.footer-text {
	font-size: 24rpx;
	color: #c0c4cc;
	line-height: 1.4;
}

/* 空状态 */
.empty-state {
	padding: 100rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-text {
	font-size: 28rpx;
	color: #909399;
	margin-top: 20rpx;
}

/* 加载状态 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.loading-text {
	font-size: 28rpx;
	color: #909399;
	margin-top: 16rpx;
}

/* 当前培训场次样式 - 简洁版 */
.session-card.current-session {
	border: 3rpx solid #2979ff;
	background: linear-gradient(135deg, rgba(41, 121, 255, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
	box-shadow: 0 8rpx 32rpx rgba(41, 121, 255, 0.2);
}

.session-card.current-session::after {
	content: "当前场次";
	position: absolute;
	top: -2rpx;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #2979ff 0%, #1565c0 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 600;
	padding: 6rpx 14rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
	z-index: 10;
	letter-spacing: 1rpx;
}

/* 培训状态盖章 - 地点信息区域居中 */
.location-row {
	position: relative;
}

.training-status-stamp-center {
	position: absolute;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%) rotate(-12deg);
	font-size: 18rpx;
	font-weight: 700;
	width: 80rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6rpx;
	border: 2rpx solid;
	z-index: 5;
	opacity: 0.9;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
	letter-spacing: 1rpx;
}

/* 添加内边框效果 */
.training-status-stamp-center::before {
	content: '';
	position: absolute;
	top: 4rpx;
	left: 4rpx;
	right: 4rpx;
	bottom: 4rpx;
	border: 1rpx solid currentColor;
	border-radius: 3rpx;
	opacity: 0.3;
}

/* 居中印章的不同状态样式 */
.training-status-stamp-center.stamp-pending {
	color: #909399;
	border-color: #909399;
	background: linear-gradient(135deg, rgba(144, 147, 153, 0.1) 0%, rgba(249, 250, 251, 0.95) 100%);
}

.training-status-stamp-center.stamp-ongoing {
	color: #1890ff;
	border-color: #1890ff;
	background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(230, 247, 255, 0.95) 100%);
}

.training-status-stamp-center.stamp-completed {
	color: #52c41a;
	border-color: #52c41a;
	background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(246, 255, 237, 0.95) 100%);
}

/* 🔧 认证加载界面样式 - 与list.vue保持一致 */
.auth-loading-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #f7f9fc;
}

.loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	margin: 40rpx;
}

.loading-icon-auth {
	margin-bottom: 40rpx;
}

.loading-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 16rpx;
	text-align: center;
}

.loading-subtitle {
	font-size: 26rpx;
	color: #909399;
	text-align: center;
	line-height: 1.5;
	max-width: 400rpx;
}

.loading-footer {
	margin-top: auto;
	padding: 40rpx 0 20rpx;
}

.footer-text {
	font-size: 24rpx;
	color: #909399;
}

</style>